<template>
  <div class="box">
    <Category title="美食">
      <img src="https://img1.baidu.com/it/u=4161642052,1065452095&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1663520400&t=f775eaa91c34cfc8f4af6a1be8389c14" alt="">
    </Category>

    <Category title="游戏">
      <ul>
        <li v-for="(game,index) in games" :key="index">
            {{game}}
        </li>
    </ul>
    </Category>

    <Category title="电影">
        <video controls src="D:\Users\liyu\Videos\Captures\wbb.mp4"></video>
    </Category>
  </div>
  
</template>

<script>
  import Category from "./components/Category.vue"
  export default {
    name:"App",
    components:{
      Category  
    },
    data() {
      return {
        foods:['火锅','烧烤','小龙虾','牛排'],
        games:['LOL','穿越火线','劲舞团','超级玛丽'],
        films:['《教父》','《你好，李焕英》','《拆弹专家》','《阿凡达》']
      }
    },
    
  }
</script>

<style>
  .box{
    display:flex;
    justify-content: space-around;
  }
  img{
    width:100%
  }
  video{
    width:100%;
  }
</style>